<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">

    /*p*/
    /*{*/
    /*border: medium double rgb(250,0,255)*/
    /*}<!--在所有段落生成一个改颜色的框-->*/
   /*p*/
    /*{*/
        /*border-style: solid;*/
        /*border-width: 5px!*设置所有框的宽度*!*/
    /*}*/
    /**/
    p.margin {margin: 2cm 4cm 3cm 4cm}/*设置外边距*//*下边框是buttom，左边框是left，右边框是right，上边框是top*/
    /*p*/
    /*{*/
        /*border-style:solid;*/
        /*border-bottom-color:#ff0000;*/
    /*}!*设置框的颜色*!*//*下边框是buttom，左边框是left，右边框是right，上边框是top*/


    span
    {
        display: block/*将span元素定义为块级元素*/
    }

    table.one
    {
        table-layout: auto/*auto会自动调整表的格式*/
    }
    table.two
    {
        table-layout: fixed/*fixed只会根据给出的数据创建表*/
    }

    td.test1 {padding: 1.5cm}
    td.test2 {padding: 0.5cm 2.5cm}

    p.dotted {border-style: dotted}
    p.dashed {border-style: dashed}
    p.solid {border-style: solid}
    p.double {border-style: double}
    p.groove {border-style: groove}
    p.ridge {border-style: ridge}
    p.inset {border-style: inset}
    p.outset {border-style: outset}/*六种不同的框*/
    p.ex1
    {
        font:italic bold 12px/5px arial, sans-serif;
    }

    p.ex2 {
        font: italic bold 12px/30px arial, sans-serif;
    }
    h1 {letter-spacing: 0.5em}/*<!--设置文字的间距-->*/
    h2 {letter-spacing: 10px}

    p.smallhigh
    {
        line-height: 0.5
    }
    p.bighigh
    {
        line-height: 2
    }
    p.uppercase {text-transform: uppercase}/*<!--使字母都大写-->*/

    p.lowercase {text-transform: lowercase}/*<!--使字母都小写-->*/

    p.capitalize {text-transform: capitalize}/*<!--单词的首字母大写-->*/

    span.highlight
    {
        background-color:yellow;
    }
    #red {color:red;}/*派生选择器*/
    #green {color:green;}

    body {background-color: white}

    h1 {text-decoration: overline}/*<!--文字上方加一条线-->*/

    h2 {text-decoration: line-through}/*<!--文本中间加一条线-->*/

    h3 {text-decoration: underline}/*<!--文字下方加一条下划线-->*/

    h1 {background-color: #00ff00}

    h1 {text-align: center}/*<!--h1居中对齐-->*/
    h2 {text-align: left}/*<!--h2左对齐-->*/

    h1 {font-family:Georgia;}/*<!--为所有 h1 元素设置了 Georgia 字体-->*/

    h2 {background-color: transparent}

    p {background-color: rgb(250,255,255)}

    p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}/*<!--可以为给定的元素指定一系列类似的字体-->*/

    p {text-indent: 1cm}/*<!-- text-indent 属性规定文本块中首行文本的缩进。-->*/

    p.thicker {font-weight: 900}/*<!--shu100对应最细的字体变形，900 对应最粗的字体变形。数字400 等价于 normal，而700 等价于 bold。-->*/
    p.thick  {font-weight: bold}/*<!--使用 bold 关键字可以将文本设置为粗体。-->*/

    p.italic {font-style:italic}
    p.oblique {font-style:oblique}/*<!--两种倾斜字体-->*/


    h1 {font-size: 100%}/*<!--设置字体-->*/
    h2 {font-size: 200%}
    p {font-size: 300%}

    p.small {font-variant: small-caps}/*<!--设置小型大写字母字体-->*/
</style>
</head>

<body>


<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<p>这是段落.这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。</p>

<p class="no2">这个段落设置了内边距。</p>

<p>This is a paragraph, normal.</p>

<p class="ex1">This is a paragraph, italic.</p>
<p class="ex2">This is a paragraph, italic.</p>


<p class="oblique">This is a paragraph, oblique.</p>

<p class="small">This is a paragraph, small.</p>

<p class="thick">This is a paragraph</p>

<p class="thicker">This is a paragraph</p>

<p id = "red">这个段落是红色的</p>

<p id = "green">这个段落是绿色的</p>

<p>
    <span class = "highlight">这是span元素。</span>这是span元素。这是span元素。这是span元素。这是span元素。这是span元素。

    这是span元素。这是span元素。<span style="color : red">这是span元素。</span>这是span元素。这是span元素。</span  >这是span元素。这是span元素。这是span元素。
</p>

<p class = "smallhigh">这个段落拥有更小的行高。
    这个段落拥有更小的行高。
    这个段落拥有更小的行高。</p>

<p class = "bighigh">这个段落拥有更大的行高。
    这个段落拥有更大的行高。</p>

<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>

<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>

<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的左外边距。</p>

<table border="1">
    <tr>
        <td class="test1">
            这个表格单元的每个边拥有相等的内边距。
        </td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td class="test2">
            这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
        </td>
    </tr>
</table>

<table class="one" border="1" width="100%">
    <tr>
        <td width="10%">1000000000000000000000000000</td>
        <td width="40%">10000000</td>
        <td width="40%">100</td>
    </tr>
</table>

<br />

<table class="two" border="1" width="100%">
    <tr>
        <td width="10%">1000000000000000000000000000</td>
        <td width="40%">10000000</td>
        <td width="40%">100</td>
    </tr>
</table>

</body>
</body>
</html>